/* ------------ 状态栏容器 ------------ */
.state-bar-container{
	display: flex;
	position: relative;
	flex-direction: row;
	align-items: center;
	height: 30px;
	width: 100%;
}
/* ------------ 状态栏标题部分 ------------ */
.state-bar-container .title-display{
	line-height: 30px;
	cursor: default;
	width: 44px;
	text-align: center;
	flex-shrink: 0;
}
.state-bar-container .title-gapline{
	width: 1px;
	height: 20px;
	background-color: #8b8b8b;
	flex-shrink: 0;
}
.state-bar-container .add-state {
	background-image: url("./light/add.svg");
	margin-left: 7px;
}
.state-bar-container .title-gapline{
	width: 1px;
	height: 20px;
	background-color: #8b8b8b;
	flex-shrink: 0;
}
.state-bar-container .state-gapline{
	margin-left: 10px;
	width: 1px;
	height: 100%;
	background-color: #8b8b8b;
	flex-shrink: 0;
}

/* ------------ 状态项横向列表 ------------ */
.state-bar-container .state-items-list{
	overflow-x:overlay;
	overflow-y: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;
}

/* ------------ 渲染项 ------------ */
.state-bar-container .state-items-list .state-item-container{
    display: inline-block;
    position: relative;
	border-right: 1px solid #8b8b8b;
	cursor: default;
	overflow: hidden;
	flex-shrink: 0;
}
.state-bar-container .state-items-list .state-item-container:hover{
	background-color: rgba(255,255,255,0.05);
}
.state-bar-container .state-items-list .state-item-container.selected{
	background-color: rgba(0,0,0,0.3);
}

.state-item-container .name-display{
	height: 30px;
	line-height: 30px;
	padding-left: 17px;
	padding-right: 17px;
	min-width: 100px;	
	white-space: nowrap;
	text-align: center;
	cursor: default;
}
.state-item-container .default-btn {
	top: -1px;
	left: 0px;
	width: 15px;
	height: 15px;
	position: absolute;
	cursor: pointer;
	background-image: url("light/default.svg");
	background-size: cover;
	background-repeat: no-repeat;
}
.state-item-container .default-btn.active {
    background-image: url("light/default_active.svg");
}
.state-item-container .delete-btn {
	top: 8px;
	right: 1px;
	width: 15px;
	height: 15px;
	position: absolute;
	cursor: pointer;
	background-image: url("light/delete.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

.state-item-container .name-input {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #1e2329;
	border: 1px solid #191e23;
	text-align: center;
}
.state-item-container .name-input:focus {
	outline: 1px solid rgba(14,99,156,0.6);
	outline-offset: -1px;
	opacity: 1 !important;
}
.state-item-container .name-input.hidden {
	display: none;
	visibility: hidden;
}


.create-state-content .text-input {
	background-color: #303030;
	border: 1px solid #252525;
	text-align: left;
}
.create-state-content .text-input:focus {
	outline: 1px solid rgba(14,99,156,0.6);
	outline-offset: -1px;
	opacity: 1 !important;
}
.create-state-content .select-input {
	background-color: #303030;
	border: 1px solid #252525;
	text-align: left;

	
}
.create-state-content .select-input:focus {
	outline: 1px solid rgba(14,99,156,0.6);
	outline-offset: -1px;
	opacity: 1 !important;
}